async function drawLineChart() {

    // 1. Access data

    // let dataset = await d3.json("./../../my_weather_data.json")
    let dataset = await d3.json("./../../nyc_weather_data.json")
    dataset = dataset.slice(0, 100)

    // d 是个什么东西  是lambda 就是取得了 json的 temperatureMax 字段
    // const yAccessor = d => d.temperatureMax

    const yAccessor = d => d.temperatureMin
    const dateParser = d3.timeParse("%Y-%m-%d")
    const xAccessor = d => dateParser(d.date)

    // 2. Create chart dimensions

    let dimensions = {
        width: window.innerWidth * 0.9,
        height: 400,
        margin: {
            top: 15,
            right: 15,
            bottom: 40,
            left: 60,
        },
    }
    dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right
    dimensions.boundedHeight = dimensions.height - dimensions.margin.top - dimensions.margin.bottom

    // 3. Draw canvas
    // d3 折线图 显示 具体数字

    const wrapper = d3.select("#wrapper")
        .append("svg")
        .attr("width", dimensions.width)
        .attr("height", dimensions.height)
// 这样子不显示 也没有报错
//         .data(dataset)
//         // 需要加数据  .text(d => { 这里的数据从
//         .enter()
//         .append("text")
// //             去掉  .enter() 至少显示了 但是没有字
//         // 这里加上 tex 没有用处
//         .text(d => {
//           // d
//           // chart.js:45 undefined
//           console.log("d")
//           console.log(d)
//          return  d
//         })

    // const barText = wrapper.filter(yAccessor)
    //     .append("text")
    //     .attr("x", d => xScale(d.x0) + (xScale(d.x1) - xScale(d.x0)) / 2)
    //     // scale()方法来实现元素的缩放效果。
    //     //   这是求平均数吧 但是为了 防止溢出什么的 二分里面有这个
    //     .attr("y", d => yScale(yAccessor(d)) - 5)
    //     .text(yAccessor)
    //     .style("text-anchor", "middle")
    //     .attr("fill", "darkgrey")
    //     .style("font-size", "12px")
    //     .style("font-family", "sans-serif")


    const bounds = wrapper.append("g")
        .style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)

    bounds.append("defs").append("clipPath")
        .attr("id", "bounds-clip-path")
        .append("rect")
        .attr("width", dimensions.boundedWidth)
        .attr("height", dimensions.boundedHeight)

        // .enter()
        // // 这里加上 tex 没有用处
        // .text(d => d)
    // 没用啊
    const clip = bounds.append("g")
        .attr("clip-path", "url(#bounds-clip-path)")

    // 4. Create scales

    const yScale = d3.scaleLinear()
        .domain(d3.extent(dataset, yAccessor))
        .range([dimensions.boundedHeight, 0])
// x 轴是时间
//     https://jingyan.baidu.com/article/b2c186c8191eadc46ef6ffca.html
    const xScale = d3.scaleTime()
        .domain(d3.extent(dataset, xAccessor))
        .range([0, dimensions.boundedWidth])

    // 5. Draw data

    const lineGenerator = d3.line()
        .x(d => xScale(xAccessor(d)))
        .y(d => yScale(yAccessor(d)))

    const line = clip.append("path")
        .attr("class", "line")
        .attr("d", lineGenerator(dataset))
    // https://www.thinbug.com/q/33348081
    //     坐标轴无了
    // https://www.cnblogs.com/chenjy1225/p/11013643.html
    //     .enter()
    //     .append("text")
    //     .text('some label text can also be a function') //Change this
    //     .attr(function (d) { return d.x; })
    //     .attr(function (d) { return d.y; });
    // 数据的意思吗
    // https://www.thinbug.com/q/33348081
    // 6. Draw peripherals

    // https://www.jb51.net/article/93088.htm
    // 添加点
    // line.selectAll('circle')
    //     .data(dataset)
    //     .enter()
    //     .append('circle')
    //     .attr('cx', function(d) {
    //         return xScale(d.x);
    //     })
    //     .attr('cy', function(d) {
    //         return yScale(d.y);
    //     })
    //     .attr('r', 5)
    //     .attr('fill', function(d, i) {
    //         return getColor(i);
    //     });


    const yAxisGenerator = d3.axisLeft()
        .scale(yScale)
        .ticks(3)

    const yAxis = bounds.append("g")
        .attr("class", "y-axis")
        .call(yAxisGenerator)

    const yAxisLabel = yAxis.append("text")
        .attr("x", -dimensions.boundedHeight / 2)
        .attr("y", -dimensions.margin.left + 10)
        .attr("class", "y-axis-label")
        // .html("Maximum Temperature (&deg;F)")
        .html("min Temperature (&deg;F)")
    // 这里为什么灰色 不是有 显示吗

    const xAxisGenerator = d3.axisBottom()
        .scale(xScale)

    const xAxis = bounds.append("g")
        .attr("class", "x-axis")
        .style("transform", `translateY(${dimensions.boundedHeight}px)`)
        .call(xAxisGenerator)
}

drawLineChart()
